<template>
    <div>
        <el-backtop :bottom="100" :visibility-height="5" target=".el-main" ref="backTop" />
        <el-pagination v-model:currentPage="page" background v-model:page-size="limit" :page-sizes="[5, 10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" />
    </div>
</template>
<script lang="ts" setup>
import { ref, nextTick, computed, watch } from 'vue'

let porops= defineProps({
    page: {
        type: Number,
        default: 1
    },
    limit: {
        type: Number,
        default: 10
    },
    total: {
        type: Number,
        default: 0
    }
})

let emits = defineEmits(['pageChange'])
const page = ref(porops.page)
const limit = ref(porops.limit)

const backTop = ref()


const pager = computed(() => {
    return Math.ceil(porops.total/ limit.value)//总条数/一页面所显示的条数，并且向上取整，解决切换最大页数无数据bug
})
//监听，发生变化则响应切换页数
watch([page,limit], (newVal, oldVal) => {
    if (page.value <= pager.value) {
        emits('pageChange',{page:page.value,limit:limit.value})
        nextTick(() => {//模拟点击事件，当到一定距离可滚动到顶部
            backTop.value.$el.click?.()
        })
    }
})
</script>

